<template>
  <div class="box">
    <van-tabs v-model="active">
      <van-tab title="今日精选"
        ><div class="waterfall">
          <div
            v-for="(v, index) in arr1"
            :key="index"
            class="box"
            @click="fun(v)"
          >
            <div class="top">
              <img :src="v.img1" alt="" />
            </div>
            <div>
              <div class="box1">{{ v.proname }}</div>
              <div class="box2">
                ￥{{ v.originprice }}
                <div class="box3">看相似</div>
              </div>
            </div>
          </div>
        </div></van-tab
      >
      <van-tab title="手机通讯"
        ><div class="waterfall">
          <div
            v-for="(v, index) in arr1"
            :key="index"
            class="box"
            @click="fun(v)"
          >
            <div class="top">
              <img :src="v.img1" alt="" />
            </div>
            <div>
              <div class="box1">{{ v.proname }}</div>
              <div class="box2">
                ￥{{ v.originprice }}
                <div class="box3">看相似</div>
              </div>
            </div>
          </div>
        </div></van-tab
      >
      <van-tab title="电脑数码"
        ><div class="waterfall">
          <div
            v-for="(v, index) in arr1"
            :key="index"
            class="box"
            @click="fun(v)"
          >
            <div class="top">
              <img :src="v.img1" alt="" />
            </div>
            <div>
              <div class="box1">{{ v.proname }}</div>
              <div class="box2">
                ￥{{ v.originprice }}
                <div class="box3">看相似</div>
              </div>
            </div>
          </div>
        </div></van-tab
      >
      <van-tab title="家用电器"
        ><div class="waterfall">
          <div
            v-for="(v, index) in arr1"
            :key="index"
            class="box"
            @click="fun(v)"
          >
            <div class="top">
              <img :src="v.img1" alt="" />
            </div>
            <div>
              <div class="box1">{{ v.proname }}</div>
              <div class="box2">
                ￥{{ v.originprice }}
                <div class="box3">看相似</div>
              </div>
            </div>
          </div>
        </div></van-tab
      >
      <van-tab title="数码配件"
        ><div class="waterfall">
          <div
            v-for="(v, index) in arr1"
            :key="index"
            class="box"
            @click="fun(v)"
          >
            <div class="top">
              <img :src="v.img1" alt="" />
            </div>
            <div>
              <div class="box1">{{ v.proname }}</div>
              <div class="box2">
                ￥{{ v.originprice }}
                <div class="box3">看相似</div>
              </div>
            </div>
          </div>
        </div></van-tab
      >
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";
let service = axios.create();
export default {
  data() {
    return {
      active: 0,
      arr1: [],
    };
  },
  mounted() {
    service({
      url: "http://118.178.238.19:3001/api/pro/search", //页面加载发请求
      methed: "get",
    }).then((res) => {
      this.arr1 = res.data.data;
    });
  },
};
</script>

<style scoped>
.waterfall {
  display: flex;
  flex-wrap: wrap;
}

.waterfall {
  display: flex;
  justify-content: space-between;
  background: #eee;
}

.waterfall .box {
  width: 170px;
  margin: 6px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  text-align: center;
}

.waterfall .top img {
  width: 160px;
}

.box1 {
  font-size: 14px;
  color: #434343;
}

.box2 {
  font-size: 14px;
  color: red;
  text-align: left;
}
.box3 {
  width: 50px;
  float: right;
  background: #eee;
  border-radius: 10px;
  font-size: 12px;
  margin-right: 10px;
  text-align: center;
  color: #000;
}
</style>